<!--数据详情-->
<template>
  <el-drawer
    title="数据详情"
    size="60%"
    :visible="visible"
    @update:visible="updateVisible"
  >
    <div class="flex-between top-padding">
      <div class="cloumn-data" v-for="(i,j) in list" :key="j">
        <span>{{i.name}}</span>
        <div class="font-overflow">{{i.num}}</div>
      </div>
    </div>
    <ele-pro-table
      style="padding: 31px 55px"
      :toolbar="false"
      ref="table"
      size="mini"
      :columns="columns"
      :datasource="datasource"
      :selection.sync="selection"
      :need-page="true"
      :hideOnSinglePage="true"
    >
      <template v-slot:avater="{ row }">
        <img :src="row.head" class="user-img" />
      </template>

      <!--曝光数-->
      <template v-slot:playCount="{ row }">
        <div v-if="releaseChannel.releaseChannel==1">{{ row.viewCount ? row.viewCount : 0}}</div>
        <div v-else>{{ row.ksList.video_info ? row.ksList.video_info.view_count : 0}}</div>
      </template>
      <!--点赞数-->
      <template v-slot:diggCount="{ row }">
        <div v-if="releaseChannel.releaseChannel==1">{{ row.likeCount ? row.likeCount : 0}}</div>
        <div v-else>{{ row.ksList.video_info ?  row.ksList.video_info.like_count : 0}}</div>
      </template>
      <!--评论数-->
      <template v-slot:commentCount="{ row }">
        <div v-if="releaseChannel.releaseChannel==1">{{ row.commentCount ? row.commentCount : 0}}</div>
        <div v-else>{{ row.ksList.video_info ?  row.ksList.video_info.comment_count : 0}}</div>
      </template>
      <!--添加时间-->
      <template v-slot:createTime="{ row }">
        <div v-if="releaseChannel.releaseChannel==1">{{ row.createTime }}</div>
        <div v-else>{{ row.ksList.video_info ?  $sun.timestampToTime(row.ksList.video_info.create_time) : ''}}</div>
      </template>

      <!--操作-->
      <template v-slot:action="{ row }">
        <!--pending:作品状态(是否还在处理中，不能观看)true_处理中 false_未处理，可观看-->
        <el-link
          type="primary"
          :underline="false"
          :disabled="row.ksList.video_info &&row.ksList.video_info.pending==false ? false : true"
          @click.stop="viewWorks(row)"
        >
          观看作品

        </el-link>
        <!--<el-link
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>-->
      </template>
    </ele-pro-table>
  </el-drawer>
</template>

<script>

  import { ksPhotoList } from "@/api/matrixManage/accountList";
  import {delGroup} from "@/api/matrixManage/groupManage";
  import {publishPageQuery,getEventDetails} from "@/api/releaseManage/tiktok";
  import {getActivityes} from "@/api/explosiveCode/releaseActivity";

  export default {
    name: "data-detail",
    props: {
      // 1:D音 2:视频号 3:K手
      releaseChannel:Object,
      // 弹窗是否打开
      visible: Boolean,
    },
    data (){
      return {
        selection:[],
        list:[
          /*{
            name:'新增粉丝',
            num:0
          },*/
          {
            name:'曝光总量',
            num:0
          },{
            name:'点赞总数',
            num:0
          },{
            name:'评论总数',
            num:0
          },
        ],
        // 表格列配置
        // 抖音数据查看网址：https://developer.open-douyin.com/docs/resource/zh-CN/dop/develop/openapi/video-management/douyin/search-video/video-data
        columns: [
          {
            prop: 'head',
            label: '头像',
            width: 95,
            align: 'center',
            slot: 'avater',
            showOverflowTooltip: true
          },
          {
            prop:'nickname',
            label: '用户名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'playCount',
            prop:'play_count',
            label: '曝光数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'diggCount',
            prop:'digg_count',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'commentCount',
            prop:'comment_count',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            slot: 'createTime',
            prop:'createTime',
            label: '添加时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            show:false,
            label: '操作',
            columnKey: 'action',
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
          }
        ],
      }
    },
    created(){
      // this.getCode()
      console.log("进入组件=========",this.visible)
    },
    methods: {
      async datasource({ page, limit, where, order }) {
        console.log("this.releaseChannel.",this.releaseChannel)
        // releaseChannel 1:D音 2:视频号 3:K手
        let apiUrl=this.releaseChannel.releaseChannel==1 ? getActivityes : ksPhotoList
        this.columns[6].show = this.releaseChannel.releaseChannel==3 ? true : false


        // return ksPhotoList(token);
        // const result = await apiUrl({ ...where, ...order, page, limit,id:this.releaseChannel.id });
        const result = await getActivityes({ ...where, ...order, page, limit,id:this.releaseChannel.id });
        console.log('result',result)
        let list=result.list.length>0?result.list:[]
        let playAll=0    //曝光数(总)
        let diggAll=0    //点赞数(总)
        let commentAll=0    //评论数(总)
        for(let i=0 ;i<list.length;i++){
          console.log('list[i]',list[i])
          // =1 抖音 否则快手
          if(this.releaseChannel.releaseChannel==1){
            console.log("111111")
            playAll+=list[i].viewCount   //曝光数
            diggAll+=list[i].likeCount   //点赞数
            commentAll+=list[i].commentCount   //评论数
          }
          else{
            console.log("222222")
            if(list[i].ksList && list[i].ksList.video_info){
              playAll+=list[i].ksList.video_info.view_count   //曝光数
              diggAll+=list[i].ksList.video_info.like_count   //点赞数
              commentAll+=list[i].ksList.video_info.comment_count   //评论数
            }
          }
        }
        console.log("playAll,diggAll,commentAll",playAll,diggAll,commentAll)
        /*let playAll=0    //曝光数(总)
        let diggAll=0    //点赞数(总)
        let commentAll=0    //评论数(总)*/
        this.list[0].num=playAll
        this.list[1].num=diggAll
        this.list[2].num=commentAll
        console.log("this.list======",this.list)
        return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* 更新 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      // 观看作品
      viewWorks(row){
        console.log("点击了观看作品",row)
        let videoUrl = row.ksList.video_info.play_url
        window.open(videoUrl)
      },
      /* 删除（未使用） */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delGroup({
            ids:ids
          })
            .then((data) => {
              this.$emit('load')
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      }
    }
  }
</script>

<style scoped lang="less">
  .user-img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .top-padding{
    padding: 39px 81px 0px 59px;
    .cloumn-data{
      text-align: center;
      width: calc(100%/4);
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
      border-bottom: 3px solid #DDF0FF;
      color: #757575;
      padding: 18px 0 12px;
      div{
        margin-top: 12px;
        font-size: 32px;
      }
    }
  }
</style>
